<template>
  <div class="user-info-wrap">
    <el-form ref="addDrawer" label-position="top" :model="from" :rules="ruleAdd">
      <el-form-item prop="name" label="列表名称">
        <el-input v-model="from.name" :disabled="isEdit" maxlength="20" placeholder="名称最多20个字符"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="from.remark"
          :disabled="isEdit"
          type="textarea"
          maxlength="50"
          placeholder="描述最多50个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="from.status" :disabled="isEdit">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ListInfo',
  props: {
    from: {
      type: Object,
      require: true,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleAdd: {
        name: [{ required: true, message: '请输入列表名称', trigger: 'blur' }]
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/variables";

.user-info-wrap {
  ::v-deep .el-input {
    &.el-input--mini {
      &.is-disabled {
        .el-input__inner {
          padding: 0;
          background-color: transparent;
          border: none;
          color: $fontColor;
        }
      }
    }
  }
}
</style>
